<template>
  <div class="msgDetail-container">
    <div class="main">
      <div class="left">
        <h2>{{ data.title }}</h2>
        <div>
          <span>{{ parseTime(data.createTime) }}</span>
        </div>
        <div class="content" v-html="data.content"></div>
      </div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getMessageDetail } from "@/api/homePage/messageApi";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { parseTime } from "@/utils/tool";
import { getCompanyDetail } from "@/api/homePage/companyApi";

const route = useRoute();

const data = ref<any>({});
(async () => {
  if (route.query.type === "2") {
    const resp = await getCompanyDetail(route.params.id);
    resp.title = resp.name;
    data.value = resp;
  } else {
    data.value = await getMessageDetail(route.params.id);
  }
})();
</script>

<style scoped lang="scss">
@import "@/css/respondMixin";

.msgDetail-container {
  overflow: hidden;
  .main {
    width: 1200px;
    margin: 40px auto;
    overflow: auto;
    padding: 10px;
    @include respond-to("phone") {
      width: 100%;
      margin: 30px auto;
    }

    .left {
      .content {
        margin-top: 20px;
      }
    }
  }
}
</style>
